<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter">
            <el-form-item label="线路段名称" prop="lineSectionName">
                <el-input v-model="filter.lineSectionName" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>
            <el-form-item label="所属线路" prop="lineId">
                <el-select v-model="filter.lineId" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in lineList"
                        :key="item.id"
                        :label="item.lineName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="出发站点" prop="startStationId">
                <el-select v-model="filter.startStationId" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in stationOptions"
                        :key="item.id"
                        :label="item.stationName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="到达站点" prop="endStationId">
                <el-select v-model="filter.endStationId" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in stationOptions"
                        :key="item.id"
                        :label="item.stationName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="出发车场" prop="startCarParkId">
                <el-select v-model="filter.startCarParkId" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in carParkOptions"
                        :key="item.id"
                        :label="item.carParkName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="到达车场" prop="endCarParkId">
                <el-select v-model="filter.endCarParkId" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in carParkOptions"
                        :key="item.id"
                        :label="item.carParkName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                <el-button @click="resetFilter()" icon="el-icon-refresh-left">重置</el-button>
                <el-button @click="showUpdate({})" icon="el-icon-plus">添加</el-button>
                <el-button @click="toBatchAdd()" icon="el-icon-plus">批量添加子线路</el-button>
                <el-button @click="toBatchAddLineSectionSeatPrice()" icon="el-icon-plus">批量添加座位价格</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :cell-class-name="getCellIndex"
                @cell-click="tableDbEdit"
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column prop="id" label="ID" width="60px"/>
                <el-table-column prop="lineSectionName" label="线路段名称" width="120px"/>
                <el-table-column prop="startStationName" label="出发站点"/>
                <el-table-column prop="startCarParkName" label="出发车场" width="120px"/>
                <el-table-column prop="endStationName" label="到达站点"/>
                <el-table-column prop="endCarParkName" label="到达车场" width="120px"/>
                <el-table-column prop="fromStartStationTime" label="离第一出发地点时间(分钟)" width="110px"/>
                <el-table-column prop="sectionDistance" label="里程(km)"/>
                <el-table-column prop="sectionTime" label="耗时(分钟)"/>
                <el-table-column prop="remark" label="备注"/>
                <el-table-column property="sort" sortable label="排序" width="80px">
                    <template #default="scope">
                    <span v-show="!(scope.row.index == coordinate.row && scope.column.index ==coordinate.column)">
                        {{ scope.row.sort }}
                    </span>
                        <el-input
                            v-show="scope.row.index == coordinate.row && scope.column.index ==coordinate.column"
                            ref="sort"
                            v-model="scope.row.sort"
                            size="mini"
                            autofocus
                            @change="submitTableEdit(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80px">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitch(scope.row.status,scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"  width="160px"/>
                <el-table-column fixed="right" label="操作" width="220px">
                    <template #default="scope">
                        <el-button size="mini" type="text" style="margin:0 0px 10px 10px;" @click="toSectionSeat(scope.row)">座位价格
                        </el-button>

                        <el-button size="mini" type="text" style="margin:0 0px 10px 10px;" @click="toSectionVersion(scope.row)">版本管理
                        </el-button>

                        <el-button size="mini" type="text" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" style="margin:0 0px 10px 10px;"
                                       @onConfirm="handleDelete(scope.row.id)">
                            <el-button size="mini" type="text" slot="reference">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <Update ref="updateRef" @refresh="getPage()"/>
        </div>
    </section>
</template>
<script>
import {LineSectionApi} from '@/api/intercity/LineSectionApi'
import {LineApi} from '@/api/intercity/LineApi'
import {StationApi} from '@/api/intercity/StationApi'
import {CarParkApi} from '@/api/intercity/CarParkApi'
import Update from './Update.vue'

export default {
    name: 'lineSection',
    components: {
        Update
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                lineSectionName: '',
                lineId:'',
                startStationId:'',
                endStationId:'',
                startCarParkId:'',
                endCarParkId:''
            },
            coordinate: {column: -1, row: -1},
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            },
            lineList:[],
            stationOptions:[],
            carParkOptions:[]
        }
    },
    created() {
        this.getLineList()
        this.getStationOptions()
        this.getCarParkOptions()
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            this.filter['pageIndex'] =this.page.current
            this.filter['pageSize'] =this.page.size

            this.loading = true
            LineSectionApi.getPage(this.filter).then((response) => {
                response.records.forEach(function(item){
                    item.sectionDistance = item.sectionDistance/1000
                })
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 获取总线路组
        getLineList() {
            LineApi.getList().then((response) => {
                this.lineList = response
            })
        },

        // 获取所有站点
        getStationOptions() {
            StationApi.getList().then((response) => {
                this.stationOptions = response
            })
        },

        // 获取所有车场
        getCarParkOptions() {
            CarParkApi.getList().then((response) => {
                this.carParkOptions = response
            })
        },

        // 修改状态
        statusSwitch(val, id) {
            const params = {
                id: id,
                status: val
            }

            LineSectionApi.updateStatus(params).then((response) => {
            })
        },

        tableDbEdit(row, column) {
            this.coordinate.row = row.index
            this.coordinate.column = column.index
        },

        // 修改排序
        submitTableEdit(row) {
            this.coordinate.column = -1
            this.coordinate.row = -1
            const params = {
                id: row.id,
                sort: row.sort
            }
            LineSectionApi.updateSort(params).then((response) => {
            })
        },

        // 删除数据
        handleDelete(id) {
            LineSectionApi.delete(id).then((response) => {
                this.getPage()
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        getCellIndex({row, column, rowIndex, columnIndex}) {
            row.index = rowIndex
            column.index = columnIndex
        },

        showUpdate(data) {
            this.$refs['updateRef'].showUpdate(data)
        },
        toSectionSeat(item) {
            this.$router.push({
                name:'lineSectionSeatList',
                query: {
                    lineGroupId: item.lineGroupId,
                    lineSectionId: item.id,
                    lineSectionName: item.lineSectionName
                }
            })
        },
        toSectionVersion(item) {
             this.$router.push({
                name: 'lineSectionVersion',
                query: {
                    sectionId: item.id,
                    sectionName: item.lineSectionName
                }
            })
        },
        toBatchAdd() {

             this.$router.push({
                name: 'batchAddLineSection',
                query: {
                }
            })
        },
        toBatchAddLineSectionSeatPrice() {
             this.$router.push({
                name: 'batchAddLineSectionSeatPrice',
                query: {
                }
            })
        },
        resetFilter() {
            this.$refs['filterRef'].resetFields()
            this.getPage()
        }
    }
}

</script>

<style lang="scss" scoped></style>
